<script setup lang="ts">
  import DataShowECharts from '@/components/dataShow/DataShowECharts.vue';
  import DataShowEChartsItem from '@/components/dataShow/DataShowEChartsItem.vue';
  import { IDataShowReturn } from '@/api/types';
  import ShowLine from '@/components/dataShow/ShowLine.vue';
  import ShowBar from '@/components/dataShow/ShowBar.vue';
  const props = withDefaults(defineProps<{ loading: boolean; showData: IDataShowReturn }>(), {
    loading: false,
    //@ts-ignore
    showData: [] as IDataShowReturn,
  });
  const graphicsType = {
    line: ShowLine,
    bar: ShowBar,
  };
</script>

<template>
  <div class="p-2">
    <DataShowECharts>
      <Component
        v-for="item in showData"
        :is="graphicsType[item.type]"
        :show-data="item"
        :key="item.disName"
      />
      <DataShowEChartsItem v-for="i in 4" :key="i" :loading="loading && showData.length === 0" />
    </DataShowECharts>
  </div>
</template>

<style lang="scss"></style>
